<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>重置密码</title>
  <link rel="stylesheet"
    href="/framework-ui/src/main/resources/static/agcloud/framework/js-lib/agcloud-lib/css/reset.css"
    th:href="@{/agcloud/framework/js-lib/agcloud-lib/css/reset.css}">
  <link rel="stylesheet"
    href="/framework-ui/src/main/resources/static/agcloud/framework/js-lib/element-2.15.1/element.css"
    th:href="@{/agcloud/framework/js-lib/element-2.15.1/element.css}">
  <link rel="stylesheet"
    href="/framework-ui/src/main/resources/static/agcloud/framework/ui-private/default/common/css/layout.css"
    th:href="@{/agcloud/framework/ui-private/default/common/css/layout.css}">
  <link rel="stylesheet" href="../../../../../../static/agcloud/framework/login/user/resetPwd/css/index.css"
    th:href="@{/agcloud/framework/login/user/resetPwd/css/index.css}">
  <script>
    var ctx = '[[@{/}]]';
    var SSO_SERVER_URL = '[(${ssoServerUrl})]';
  </script>
</head>

<body>

  <div id="app" v-cloak v-loading="loading">
    <!-- 头部步骤-start -->
    <div class="step-wrap">
      <el-steps :active="stepActive" finish-status="process" :align-center="true">
        <el-step title="填写账号"></el-step>
        <el-step title="输入验证"></el-step>
        <el-step title="设置新密码"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
    </div>
    <!-- 头部步骤-end -->
    <!-- 内容区-start -->
    <div class="cont-wrap">
      <!-- <verity-code></verity-code> -->
      <!-- <el-form class="lg-form" ref="lgForm" :model="pdForm" :rules="pdRules" label-position="top"
        :hide-required-asterisk="true"> -->
      <!-- 第一步 -->
      <div class="cont-box on-step" v-show="stepActive == 0">
        <div class="box-header">
          <h3>填写账号并验证</h3>
          <p class="sub-title">请输入你的账号并验证，我们会给你邮箱发送验证码。</p>
        </div>
        <el-form class="lg-form" ref="lgForm" :model="pdForm" :rules="pdRules" label-position="top"
          :hide-required-asterisk="true">
          <el-form-item prop="loginName" label="账号" style="margin-top: 50px;"
            :rules="[{validator: checkItem,trigger: 'blur'}]">
            <el-input size="small" v-model="pdForm.loginName" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item prop="imageCode" label="验证码" :rules="[{validator: checkItem,trigger: 'blur'}]">
            <el-input size="small" v-model="pdForm.imageCode" placeholder="请输入验证码">
              <div id="verifyCodeImg" class="code-image" slot="append">
                <verity-code ref="vcRef" @get-code="getCode"></verity-code>
              </div>
            </el-input>
          </el-form-item>
          <!-- 回转登录页配置 -->
          <p class="to-lg-tip" v-if="false">
            记得你的密码吗？
            <a href="javascript:;" @click="toLoginFn">登录</a>
          </p>
        </el-form>
      </div>

      <!-- 第二步 -->
      <div class="cont-box two-step" v-show="stepActive == 1">
        <div class="box-header">
          <h3>输入验证码</h3>
          <p class="sub-title">请到你的邮箱获取验证码，填写并验证。</p>
        </div>
        <el-form class="lg-form" ref="lgForm1" :model="pdForm" :rules="pdRules" label-position="top"
          :hide-required-asterisk="true" @submit.native.prevent>
          <el-form-item prop="verifyCode" label="邮箱验证码" style="margin-top: 50px;"
            :rules="[{validator: checkItem,trigger: 'blur'}]">
            <el-input size="small" v-model="pdForm.verifyCode" placeholder="请输入邮箱验证码"></el-input>
          </el-form-item>
        </el-form>
      </div>

      <!-- 第三步 -->
      <div class="cont-box three-step" v-show="stepActive == 2">
        <div class="box-header">
          <h3>设置新的密码</h3>
          <p class="sub-title">请你重新输入新的密码，即可设置完成。</p>
        </div>
        <el-form class="lg-form" ref="lgForm2" :model="pdForm" :rules="pdRules" label-position="top"
          :hide-required-asterisk="true">
          <el-form-item prop="newPassword" label="新密码" style="margin-top: 50px;"
            :rules="[{validator: checkItem,trigger: 'blur'}]">
            <el-input size="small" v-model="pdForm.newPassword" placeholder="请输入新密码（8-20位）"
              @blur="$refs.lgForm.validateField(['newPasswordTmp'])" @keyUp.native="pwStrength(pdForm.newPassword)">
            </el-input>
          </el-form-item>
          <el-form-item prop="newPasswordTmp" label="再次输入密码" :rules="[{validator: checkItem,trigger: 'blur'}]">
            <el-input size="small" v-model="pdForm.newPasswordTmp" placeholder="请再次输入密码"></el-input>
          </el-form-item>
          <el-form-item label="新密码强度：" label-width="160px">
            <div class="pwd-strength-box">
              <div id="strength_L" class="str-l level-box">弱</div>
              <div id="strength_M" class="str-m level-box">中</div>
              <div id="strength_H" class="str-h level-box">强</div>
            </div>
          </el-form-item>
        </el-form>
      </div>

      <!-- 第四步 -->
      <div class="cont-box four-step" v-show="stepActive == 3">
        <div class="success-tag"></div>
      </div>
      <!-- </el-form> -->
      <el-button class="handel-btn next-btn" type="primary" v-show="stepActive != 3" @click="toNextStepFn">下一步
      </el-button>
      <el-button class="handel-btn to-lg-btn" type="primary" v-show="stepActive == 3 && false" @click="toLoginFn">去登录</el-button>
    </div>
    <!-- 内容区-end -->

    <!-- 页脚 -->
    <footer class="page-footer">
      <p>
        <i class="ico"></i>
        奥格科技股份有限公司
      </p>
    </footer>
  </div>

  <script src="/framework-ui/src/main/resources/static/agcloud/framework/js-lib/jquery-v1/jquery.min.js"
    th:src="@{/agcloud/framework/js-lib/jquery-v1/jquery.min.js}"></script>
  <script src="/framework-ui/src/main/resources/static/agcloud/framework/js-lib/vue-v2/vue.js"
    th:src="@{/agcloud/framework/js-lib/vue-v2/vue.js}"></script>
  <script src="/framework-ui/src/main/resources/static/agcloud/framework/js-lib/agcloud-lib/js/common_opus.js"
    th:src="@{/agcloud/framework/js-lib/agcloud-lib/js/common_opus.js}"></script>
  <script src="/framework-ui/src/main/resources/static/agcloud/framework/js-lib/element-2.15.1/element.js"
    th:src="@{/agcloud/framework/js-lib/element-2.15.1/element.js}"></script>
  <script src="../../../../../../static/agcloud/framework/login/js/base64.js"
    th:src="@{/agcloud/framework/login/js/base64.js}"></script>
  <script src="../../../../../../static/agcloud/framework/login/user/resetPwd/components/VerityCode/index.js"
    th:src="@{/agcloud/framework/login/user/resetPwd/components/VerityCode/index.js}"></script>
  <script src="../../../../../../static/agcloud/framework/login/user/resetPwd/js/index.js"
    th:src="@{/agcloud/framework/login/user/resetPwd/js/index.js}">
  </script>
</body>

</html>